<template>
    <view class="content">
        <a-demo title="基础使用">
            <view class="links">
                <pure-link text="超链接" :url="url" :href="href"></pure-link>
            </view>
        </a-demo>

        <a-demo title="前/后置图标">
            <view class="links column">
                <pure-link text="一个链接" :url="url" :href="href" prefixIcon="__lianjie"></pure-link>
                <pure-link text="查看更多" :url="url" :href="href" suffixIcon="__you2"></pure-link>
                <pure-link text="隐私协议" :url="url" :href="href" prefixIcon="pu-iconfont pu-iconfont-zuo3" suffixIcon="pu-iconfont pu-iconfont-you3"></pure-link>
            </view>
        </a-demo>

        <a-demo title="下划线">
            <view class="links column">
                <pure-link text="一个链接" :url="url" :href="href" underline prefixIcon="__lianjie"></pure-link>
                <pure-link text="查看更多" :url="url" :href="href" underline suffixIcon="__you2"></pure-link>
                <pure-link
                    text="隐私协议"
                    :url="url"
                    :href="href"
                    underline
                    prefixIcon="pu-iconfont pu-iconfont-zuo3"
                    suffixIcon="pu-iconfont pu-iconfont-you3"
                ></pure-link>
            </view>
        </a-demo>

        <a-demo title="主题色">
            <view class="links">
                <pure-link
                    text="主要"
                    underline
                    prefixIcon="pu-iconfont pu-iconfont-zuo3"
                    suffixIcon="pu-iconfont pu-iconfont-you3"
                    class="pure-link-primary"
                    :url="url"
                    :href="href"
                ></pure-link>
                <pure-link
                    text="成功"
                    underline
                    prefixIcon="pu-iconfont pu-iconfont-zuo3"
                    suffixIcon="pu-iconfont pu-iconfont-you3"
                    class="pure-link-success"
                    :url="url"
                    :href="href"
                ></pure-link>
                <pure-link
                    text="危险"
                    underline
                    prefixIcon="pu-iconfont pu-iconfont-zuo3"
                    suffixIcon="pu-iconfont pu-iconfont-you3"
                    class="pure-link-danger"
                    :url="url"
                    :href="href"
                ></pure-link>
                <pure-link
                    text="警告"
                    underline
                    prefixIcon="pu-iconfont pu-iconfont-zuo3"
                    suffixIcon="pu-iconfont pu-iconfont-you3"
                    class="pure-link-warning"
                    :url="url"
                    :href="href"
                ></pure-link>
                <pure-link
                    text="信息"
                    underline
                    prefixIcon="pu-iconfont pu-iconfont-zuo3"
                    suffixIcon="pu-iconfont pu-iconfont-you3"
                    class="pure-link-info"
                    :url="url"
                    :href="href"
                ></pure-link>
            </view>
        </a-demo>

        <a-demo title="禁用">
            <view class="links">
                <pure-link
                    text="主要"
                    underline
                    prefixIcon="pu-iconfont pu-iconfont-zuo3"
                    suffixIcon="pu-iconfont pu-iconfont-you3"
                    class="pure-link-primary"
                    disabled
                    :url="url"
                    :href="href"
                ></pure-link>
                <pure-link
                    text="成功"
                    underline
                    prefixIcon="pu-iconfont pu-iconfont-zuo3"
                    suffixIcon="pu-iconfont pu-iconfont-you3"
                    class="pure-link-success"
                    disabled
                    :url="url"
                    :href="href"
                ></pure-link>
                <pure-link
                    text="危险"
                    underline
                    prefixIcon="pu-iconfont pu-iconfont-zuo3"
                    suffixIcon="pu-iconfont pu-iconfont-you3"
                    class="pure-link-danger"
                    disabled
                    :url="url"
                    :href="href"
                ></pure-link>
                <pure-link
                    text="警告"
                    underline
                    prefixIcon="pu-iconfont pu-iconfont-zuo3"
                    suffixIcon="pu-iconfont pu-iconfont-you3"
                    class="pure-link-warning"
                    disabled
                    :url="url"
                    :href="href"
                ></pure-link>
                <pure-link
                    text="信息"
                    underline
                    prefixIcon="pu-iconfont pu-iconfont-zuo3"
                    suffixIcon="pu-iconfont pu-iconfont-you3"
                    class="pure-link-info"
                    disabled
                    :url="url"
                    :href="href"
                ></pure-link>
            </view>
        </a-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // URL
    const url = ref("/pages/link-open-in-app");

    // href
    const href = ref("https://www.baidu.com/");
</script>

<style scoped>
    .links {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .column {
        flex-direction: column;
        align-items: flex-start;
    }
</style>
